<template>
  <div class="view-toggle">
    <div class="toggle-slider" :style="sliderStyle"></div>
    <button
      class="view-toggle-btn"
      :class="{ active: modelValue === 'list' }"
      @click="handleChange('list')"
      title="列表视图"
    >
      <svg
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <rect
          x="2"
          y="3"
          width="12"
          height="1.5"
          rx="0.75"
          fill="currentColor"
        />
        <rect
          x="2"
          y="7"
          width="12"
          height="1.5"
          rx="0.75"
          fill="currentColor"
        />
        <rect
          x="2"
          y="11"
          width="12"
          height="1.5"
          rx="0.75"
          fill="currentColor"
        />
      </svg>
    </button>
    <button
      class="view-toggle-btn"
      :class="{ active: modelValue === 'grid' }"
      @click="handleChange('grid')"
      title="网格视图"
    >
      <svg
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <rect
          x="2"
          y="2"
          width="5"
          height="5"
          rx="0.5"
          stroke="currentColor"
          stroke-width="1.5"
          fill="none"
        />
        <rect
          x="9"
          y="2"
          width="5"
          height="5"
          rx="0.5"
          stroke="currentColor"
          stroke-width="1.5"
          fill="none"
        />
        <rect
          x="2"
          y="9"
          width="5"
          height="5"
          rx="0.5"
          stroke="currentColor"
          stroke-width="1.5"
          fill="none"
        />
        <rect
          x="9"
          y="9"
          width="5"
          height="5"
          rx="0.5"
          stroke="currentColor"
          stroke-width="1.5"
          fill="none"
        />
      </svg>
    </button>
  </div>
</template>

<script setup lang="ts">
  import { computed } from "vue";

  interface ViewToggleProps {
    modelValue?: "list" | "grid";
  }

  const props = withDefaults(defineProps<ViewToggleProps>(), {
    modelValue: "list",
  });

  const emit = defineEmits<{
    (e: "update:modelValue", value: "list" | "grid"): void;
    (e: "change", value: "list" | "grid"): void;
  }>();

  const sliderStyle = computed(() => {
    const buttonWidth = 28; // 按钮宽度
    const gap = 2; // 按钮间距
    const padding = 2; // 容器内边距
    const offset =
      props.modelValue === "list" ? padding : padding + buttonWidth + gap;

    return {
      transform: `translateX(${offset}px)`,
    };
  });

  const handleChange = (value: "list" | "grid") => {
    emit("update:modelValue", value);
    emit("change", value);
  };
</script>

<style scoped lang="scss">
  .view-toggle {
    position: relative;
    display: flex;
    align-items: center;
    background: #f5f6f7;
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
    margin-right: 8px;
  }

  .toggle-slider {
    position: absolute;
    width: 28px;
    height: 28px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 0;
  }

  .view-toggle-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    color: #42464e;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    z-index: 1;

    &:hover {
      color: #1aa1fb;
    }

    &.active {
      color: #1aa1fb;
    }

    svg {
      width: 16px;
      height: 16px;
    }
  }
</style>
